﻿@inject IAbpAntiForgeryManager AbpAntiForgeryManager
@using Abp.Web.Security.AntiForgery
@inherits KelonProud.Administration.KelonProudRazorPage<TModel>
@{
    Layout = null;
    AbpAntiForgeryManager.SetCookie(Context);
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>图标选择</title>
    <link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" asp-append-version="true" />
    <link href="~/fonts/font-awesome/css/font-awesome.css" rel="stylesheet" />
    <link href="//at.alicdn.com/t/font_856871_2t8iqsfkg4s.css" rel="stylesheet" />
    <link href="~/lib/toastr/toastr.css" rel="stylesheet" asp-append-version="true" />
    <link href="~/css/layout-master.css" rel="stylesheet" asp-append-version="true" />

    <style>
        .form-box {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }

        .fontawesome-icon-list .fa-hover a {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: block;
            color: #222;
            line-height: 32px;
            height: 32px;
            padding-left: 10px;
            border-radius: 4px;
        }

        .fontawesome-icon-list .fa-hover a {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: block;
            color: #222;
            line-height: 32px;
            height: 32px;
            padding-left: 10px;
            border-radius: 4px;
        }

        .fontawesome-icon-list .fa-hover .active, .fontawesome-icon-list .fa-hover a:hover {
            background-color: #1d9d74;
            color: #fff;
            text-decoration: none;
        }

        a {
            cursor: pointer;
        }

        .fontawesome-icon-list .fa-hover .active i, .fontawesome-icon-list .fa-hover a i {
            width: 32px;
            font-size: 14px;
            display: inline-block;
            text-align: right;
            margin-right: 10px;
        }

        .fontawesome-icon-list .fa-hover .active i, .fontawesome-icon-list .fa-hover a:hover i {
            font-size: 30px;
            vertical-align: -6px;
        }

        .box-title {
            line-height: 34px !important;
        }

        .icons-box {
            height: calc(100% - 55px);
            overflow: auto;
        }

        @@media (min-width: 500px)
        {
            .col-sm-4 {
                width: 33.3333%;
             }
       }
    </style>
</head>
<body>
    <div class="box from-box" style="zoom: 1;height: 100%;position: absolute;">
        <div class="box-header with-border">
            <form class="form-horizontal">
                <div class="form-group" style="margin: 0px;">
                    <label class="col-sm-2 control-label">所有图标</label>
                    <div class="col-sm-10">
                        <div class="input-group col-sm-8">
                            <span id="search-btn" class="input-group-btn"><button type="button" class="btn btn-primary">搜</button></span>
                            <input type="text" id="search-input" class="form-control" placeholder="按图标关键字搜索....">
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="box-body icons-box">
            <section id="chooseIcon" class="col-red">请单击选择您需要的图标</section>
        </div>
        @Html.Hidden("iconClass", "")
    </div>

    <script>
    var abp = abp || {};
    abp.appPath = '@ApplicationPath';
    </script>

    <script src="~/lib/jquery/dist/jquery.js" asp-append-version="true"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js" asp-append-version="true"></script>
    <script src="~/lib/blockUI/jquery.blockUI.js" asp-append-version="true"></script>
    <script src="~/lib/toastr/toastr.js" asp-append-version="true"></script>
    <script src="~/lib/sweetalert/dist/sweetalert.min.js" asp-append-version="true"></script>
    <script src="~/lib/spin.js/spin.js" asp-append-version="true"></script>
    <script src="~/lib/spin.js/jquery.spin.js" asp-append-version="true"></script>
    <script src="~/lib/abp-web-resources/Abp/Framework/scripts/abp.js" asp-append-version="true"></script>
    <script src="~/lib/abp-web-resources/Abp/Framework/scripts/libs/abp.jquery.js" asp-append-version="true"></script>
    <script src="~/lib/abp-web-resources/Abp/Framework/scripts/libs/abp.toastr.js" asp-append-version="true"></script>
    <script src="~/lib/abp-web-resources/Abp/Framework/scripts/libs/abp.blockUI.js" asp-append-version="true"></script>
    <script src="~/lib/abp-web-resources/Abp/Framework/scripts/libs/abp.spin.js" asp-append-version="true"></script>
    <script src="~/lib/abp-web-resources/Abp/Framework/scripts/libs/abp.sweet-alert.js" asp-append-version="true"></script>
    <script>
        $(function () {
            onLoaIcons();

            $("#search-btn").click(function () {
                onLoaIcons();
            });

            $(window).keydown(function (event) {
                if (event.keyCode === 13) {
                    onLoaIcons();
                }
            });
        });

        function onLoaIcons() {
            abp.ui.setBusy(".box");
            abp.ajax({ url: "/api/services/admin/Common/GetIconsByName?name=" + $("#search-input").val() }).done(
                function (data) {
                    $(".box-body .icon-section").remove();

                    $(data).each(function () {
                        var section = $("<section class='icon-section' />").appendTo($(".box-body"));

                        $("<h2 />").addClass("page-header").text(this.type).appendTo(section);

                        var row = $("<div class='row fontawesome-icon-list'/>").appendTo(section);

                        $(this.iconsList).each(function (i, e) {
                            var col = $("<div class='fa-hover col-md-3 col-sm-4'/>").appendTo(row);
                            col.html("<a id='" + e.name + "'><i class='" + e.cssContent + "'></i> " + e.name + "</a>");
                        });
                    });

                    $(".fa-hover a").click(function () {
                        $("#chooseIcon").html("您已选择图标[ <i class='fa-2x " +
                            $(this).find("i").attr("class") +
                            "'></i>],请点击确认后返回页面");

                        $("#iconClass").val($(this).find("i").attr("class"));
                        $(".fa-hover a").removeClass("active");
                        $(this).addClass("active");
                    });

                }).always(function () {
                    abp.ui.clearBusy(".box");
                });
        }

        function getData() {
            return $("#iconClass").val();
        }
    </script>
</body>
</html>
